<template>
    <a-form-model :model="form" :rules="rules" ref="form" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-card class="card" title="营销目标" :bordered="false">
        <a-form-model-item label="交易所在平台" >
          <a-input value="电商店铺-基木鱼" disabled />
        </a-form-model-item>
      </a-card>
      <a-card class="card" title="计划设置" :bordered="false">
        <a-form-model-item label="计划名称" prop="campaignFeedName">
          <a-input v-model="form.campaignFeedName" />
        </a-form-model-item>
      </a-card>
      <a-card>
        <a-button type="primary" @click="nextStep" :loading="loading">保存并继续</a-button>
        <a-button style="margin-left:16px;" @click="saveANDclose" :loading="loading2">保存并关闭</a-button>
        <a-button style="margin-left:16px;" @click="close" >关闭</a-button>
      </a-card>
    </a-form-model>
</template>

<script>
import { addCampaignFeed } from '@/api/xinxiliu/jihua'

export default {
  name: 'Step1',
  i18n: require('./i18n'),
  data() {
    return {
      loading:false,
      loading2:false,
      form:{
        campaignFeedName:''
      },
      rules:{
        campaignFeedName:{ required: true, message: '请输入计划名称', trigger: 'blur' },
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
    };
  },
  methods: {
    submit(){
      return new Promise((resolve) => {
        this.$refs.form.validate(valid => {
          if(valid){
            addCampaignFeed(this.form).then((e)=>{
              if(e.errcode == 0){
                this.$message.success('新增计划成功')
                console.log(e,e.data.body.data[0].campaignFeedId)
                resolve(e.data.body.data[0].campaignFeedId)
              } 
            })
          }
        })
      });
    },
    nextStep () {
      this.loading = true;
      this.submit().then((campaignFeedId) => {
        this.loading = false;
        this.$router.push('/xinxiliu/add/step2?campaignFeedId='+campaignFeedId)
      });
    },
    saveANDclose(){
      this.loading2 = true;
      this.submit().then(() => {
        this.loading2 = false;
        this.$router.push('/xinxiliu')
      });
    },
    close(){
      this.$router.push('/xinxiliu')
    }
  }
}
</script>

<style scoped>
.card{
  margin-bottom: 20px;
}
</style>
